<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>测试工具</title>

    <link  rel="stylesheet" type="text/css" href="css/weui/weui.min.css" />
    <link  rel="stylesheet" type="text/css" href="css/app.css?v=2001" />

    <style type="text/css">
        .api_host{
            text-indent: 1em;
        }

        .page, body{
            background-color: #f8f8f8;
        }
        .container{
            max-width:100%;
            margin: auto;
            min-height: 2300px;
        }

        .copyright {
            color:#99999;
            font-size: 1.5rem;
            padding: 1rem 0;
        }
        code.string,code.plain {
            display: block;
            overflow: auto;
            background: #f4f4f4;
            padding: 5px 10px;
            border: 1px solid #eee;
            word-wrap:break-word; /* Internet Explorer 5.5+ */
            white-space: pre-wrap; /* Firefox */
        }
        .fixed-top{
            position: absolute;
            top: 20px;
            width: 80%;
            float: left;
            left: 10%;
        }
        .fixed-area{

            z-index: 1000;
            height: 100px;
            position: fixed;
            bottom: 0px;
            width: 100%;
            background: #616161;
            padding: 16px;
            margin: 0px;
            box-sizing: border-box;
        }
        .fixed-area{
            background:none;
            z-index: 1000;
            height: 100px;
            position: fixed;
            top: 0px;
            left: 50%;
            margin: 0px 0px 0px -50px;
            width: 100px;
            padding: 16px;
            box-sizing: border-box;
        }
        .fixed-top{
            background: rgba(255, 6, 6, 0.75);
            position: absolute;
            top: 5px;
            width: 80px;
            height: 80px;
            float: left;
            border-radius: 50%;
            line-height: 80px;
            left: 50%;
            margin-left: -25px;
        }
    </style>

    <!-- Include required JS files -->
    <!--<script type="text/javascript" src="vendor/syntaxhighlighter_3/scripts/shCore.js"></script>-->
    <!--<script type="text/javascript" src="vendor/syntaxhighlighter_3/scripts/shBrushJScript.js"></script>-->
    <script src="vendor/CodeMirror-5.20.2/lib/codemirror.js"></script>
    <link rel="stylesheet" href="vendor/CodeMirror-5.20.2/lib/codemirror.css">
    <link rel="stylesheet" href="vendor/CodeMirror-5.20.2/addon/fold/foldgutter.css">
    <script src="vendor/CodeMirror-5.20.2/addon/hint/json-hint.js"></script>
    <script src="vendor/CodeMirror-5.20.2/addon/fold/foldcode.js"></script>
    <script src="vendor/CodeMirror-5.20.2/addon/fold/foldgutter.js"></script>
    <script src="vendor/CodeMirror-5.20.2/addon/fold/brace-fold.js"></script>
    <script src="vendor/CodeMirror-5.20.2/addon/fold/indent-fold.js"></script>
    <script src="vendor/CodeMirror-5.20.2/addon/fold/comment-fold.js"></script>
    <script src="vendor/CodeMirror-5.20.2/mode/javascript/javascript.js"></script>
    <script src="vendor/jsbeautifier/beautify.js"></script>
</head>
<body>
<div id="v_app" class="container" >


    <!-- 接口列表组件 START -->
    <form style="float:left;width:50%;"  id="params_form" class="weui-cells weui-cells_form" v-show="is_json_parsed" >
        <div class="weui-cells">
            <div class="weui-cell">
                <h3>({{ api_data.project_name }})</h3>
            </div>
        </div>
        <div class="weui-cells__title " style="display: none;">请求方式</div>
        <div class="weui-cells" style="display: none;">
            <div class="weui-cell weui-cell_select">
                <div class="weui-cell__bd">
                    <select class="weui-select" v-model="api_data.selected_api_method" >
                        <option  v-for="option in options" :value="option.value" >
                            {{ option.text }}
                        </option>
                    </select>
                </div>
            </div>
        </div>
        <div class="weui-cells__title">请求地址</div>
        <div class="weui-cells">
            <div class="weui-cell weui-cell_select">
                <div class="weui-cell__bd">
                    <select class="weui-select"  v-model="api_data.selected_api_url"  >

                        <option v-for="url_info in api_data.url_list" v-bind:value="url_info.url" >
                            {{ url_info.desc }}
                        </option>

                    </select>
                </div>
            </div>
        </div>
        <div class="weui-cells__title">服务列表</div>
        <div class="weui-cells">
            <div class="weui-cell weui-cell_select">
                <div class="weui-cell__bd">
                    <select class="weui-select" v-model="selected_api_type" >
                        <optgroup  v-for="( api_info,index) in api_data.api_list" v-bind:label="((index+1)+'. '+api_info.desc)">

                            <option v-for="(api,index) in api_info.list" v-bind:value="api.type" >
                                {{ index+1 }}. {{ api.desc }}
                            </option>
                        </optgroup>

                    </select>
                </div>
            </div>

        </div>
        <div class="weui-cells__title" style="display: none;">接口作者</div>
        <div class="weui-cells" style="display: none;">
            <div class="weui-cell" v-for="author in selected_api_info().authors" >
                <span>姓名: {{ author.name }}</span>
                <span>邮箱: {{ author.email }}</span>
            </div>

        </div>
        <div class="weui-cells__title">公共参数</div>
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">服务类型</label></div>
                <div class="weui-cell__bd">

                    <input :value="selected_api_info().type" readonly="readonly" class="weui-input" type="text"  name="api_type" placeholder="" />
                </div>
            </div>
            <div class="weui-cell " >
                <div class="weui-cell__hd">
                    <label class="weui-label">版本</label></div>
                <div class="weui-cell__bd">
                    <select class="weui-select"   v-model="selected_api_ver" >

                        <option v-for="v_info in selected_api_info().version" v-bind:value="v_info" >
                            {{ v_info }}
                        </option>

                    </select>
                </div>
            </div>
        </div>
        <div class="weui-cells__title">业务参数</div>
        <div v-for="(param,index) in selected_api_info().params" class="params_list weui-cells">

            <div class="weui-cells__title">{{ (index+1) }}. {{ param.desc }}</div>
            <div class="weui-cell"  v-if="param.type = 'enum'">
                <div class="weui-cell__hd">
                    <label class="weui-label">{{ param.key }}</label>
                </div>

                <div class="weui-cell__bd">
                    <input class="weui-input" v-model="param.value" type="text" :value="param.value" :name="param.key" :placeholder="param.desc" />
                </div>
            </div>
        </div>
        <div class="weui-btn-area fixed-area">
            <a class="weui-btn weui-btn_primary fixed-top" href="javascript:"  v-on:click="request_api">调用接口</a>
            <!--<a href="javascript:;" v-on:click="clear_result" class=" fixed-top weui-btn weui-btn_default">清空请求结果</a>-->
        </div>
        <!-- 接口列表组件 END -->

    </form>

    <div style="float:left;width:50%;" class="" v-show="is_json_parsed" >
        <div class="page panel">
            <div class="page__hd">
                <h1 class="page__title " style="text-align: center;">请求结果(最新的在前面)</h1>
            </div>
            <div class="page__bd  weui-article j_result_panel2"  >

                <div  class="weui-panel weui-panel_access">
                    <div>最近一次请求结果:</div>
                    <textarea id="codemirror"></textarea>
                </div>

            </div>
            <div class="page__bd  weui-article j_result_panel"  >

                <div v-for="result in reverse_result()" class="weui-panel weui-panel_access">

                    <div>请求时间: {{ result.time }}</div>
                    <pre class="brush:javascript" >{{ unescape(result.info.replace(/\\u/g, "%u")) }}
                        </pre>
                </div>

            </div>
        </div>
    </div>

    <!-- 描述文件解析组件 START -->
    <div style="float:left;width:100%;">
        <div class="weui-cells weui-cells_form">
            <div class="weui-cells__title">请先选择已注册的描述文件</div>
            <div class="weui-cells">
                <div class="weui-cell weui-cell_select">
                    <div class="weui-cell__bd">
                        <select class="weui-select" v-model="selected_json_url" >
                            <option v-for="json_url in api_json_url" v-bind:value="json_url.url" >
                                {{ json_url.title }}
                            </option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="weui-cells">
                <div class="weui-cell weui-cell_vcode ">
                    <div class="weui-cell__hd">
                        接口描述文件地址
                    </div>
                    <div class="weui-cell__bd">
                        <input v-bind:value="selected_json_url"   class="weui-input api_host" type="tel" placeholder="请输入接口地址">
                    </div>
                    <div class="weui-cell__ft">
                        <a href="javascript:;" class="weui-vcode-btn" v-on:click="request_json_file">载入</a>
                    </div>
                </div>

            </div>
        </div>
        <!-- 描述文件解析组件 END -->
        <div class="weui-cells__title">接口信息</div>
        <div class="weui-cells">
            <div v-for="meta_info in api_data.meta_list" class="weui-cell">
                <p> {{ meta_info.title }} : <a :href="meta_info.value" target="_blank">{{ meta_info.value }}</a></p>
            </div>
        </div>
    </div>
    <by-alert alert_id="by_alert1"></by-alert>

    <div style="float:left;width:100%;" v-html="api_error"></div>
</div>
<div class="weui-footer">
    <div class="copyright">www.8raw.com 2016</div>
</div>

<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vue-resource/dist/vue-resource.min.js"></script>

<script type="text/x-template" id="by-alert-template" ></script>
<script type="text/javascript" src="js/alert.js?v=2001"></script>
<script type="text/javascript" src="js/bookstore.js?v=2006">
</script>
</body>
</html>